
<template>
  <div id="app">
    <router-view>
      <index></index>
      <goodsList></goodsList>
      <carts></carts>
      <mine></mine>
    </router-view>

    <div class="footer">
      <router-link :to="item.to" v-for='item in footer'  @click.native='select(item)'>
          <img :src="item.on==true?item.active_icon:item.icon" alt="" :class="item.class">
          <span>{{item.text}}</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import index from './views/index.vue'
import goodsList from './views/goods_list.vue'
import carts from './views/carts.vue'
import mine from './views/mine.vue'
import global from './global.vue'
export default {
  name: 'app',
  data () {
    return {
      isSelect:'首页',
      base_url : global.base_url,
      footer:[
        {
          icon:global.img_url+'/mine/home.png',
          text:'首页',
          active_icon:global.img_url+'/mine/home-active.png',
          to:'/index',
          class:'home-icon',
          on:''
        },
        {
          icon:global.img_url+'/mine/market.png',
          text:'商城',
          active_icon:global.img_url+'/mine/market-active.png',
          to:'/goods_list',
          class:'market-icon',
          on:''
        },
        {
          icon:global.img_url+'/mine/cart.png',
          text:'购物车',
          active_icon:global.img_url+'/mine/cart-active.png',
          to:'/carts',
          class:'carts-icon',
          on:''
        },
        {
          icon:global.img_url+'/mine/mine.png',
          text:'我的',
          active_icon:global.img_url+'/mine/mine-active.png',
          to:'/mine',
          class:'mine-icon',
          on:''
        }
    ],

    }
  },
  mounted(){

// console.log(this.footer)
  },
  methods:{
    select:function(item){
      console.log(item)
      var footer = this.footer;
      for(let i = 0;i<footer.length;i++){
        footer[i].on = false
      }
      item.on = true
    },
  },
  components:{ index,goodsList,carts,mine }
}

</script>

<style media="screen" src='./assets/css/common.css'></style>
